* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
*:after {
  content: "";
  display: block;
  clear: both;
}
html {
  font-size: 16px;
  font-family: "微软雅黑" "arial" "arial black";
}
div {
  display: inline;
}
.outnav ul {
  border: 1px solid red;
  list-style: none;
  height: 72px;
  line-height: 72px;
}
.outnav ul li {
  padding: 0px 15px;
  float: left;
}
.left,
.top,
.bottom,
.right {
  position: relative;
  overflow: hidden;
}
.left:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: red;
  z-index: -1;
  transition: left 0.3s ease ;
}
.left:hover:before {
  left: 0px;
  margin-left: -15px;
  transform: translate(15px, 0);
  transition: left 0.3s ease, margin-left 0.3s 0.3s ease, transform 0.3s 0.6s ease;
}
.right:before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 100%;
  background: red;
  z-index: -1;
  transition: left 0.3s ease ;
}
.right:hover:before {
  left: 0px;
  margin-left: 15px;
  transform: translate(-15px, 0);
  transition: left 0.3s ease, margin-left 0.3s 0.3s ease, transform 0.3s 0.6s ease;
}
.top:before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  height: 100%;
  width: 100%;
  background: red;
  z-index: -1;
  transition: top 0.3s ease ;
}
.top:hover:before {
  top: 0;
  margin-top: -15px;
  transform: translate(0, 15px);
  transition: top 0.3s ease, margin-top 0.3s 0.3s ease, transform 0.3s 0.6s ease;
}
.bottom:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  background: red;
  z-index: -1;
  transition: top 0.3s ease ;
}
.bottom:hover:before {
  top: 0;
  margin-top: 15px;
  transform: translate(0, -15px);
  transition: top 0.3s ease, margin-top 0.3s 0.3s ease, transform 0.3s 0.6s ease;
}
